<template>
	<view class="container">
		<view class="list">
			<view class="img">
				<image :src="Tools.GetImg(Info.Img,1000)" mode="aspectFill" />
				<view class="state">{{Info.StateText}}</view>
				<view class="distance">{{Info.Distance}}</view>
				<view class="endtime" v-if="Info.IsStop==0"><view class="meng"></view><view class="time" v-if="Info.ID>0"><liu-countdown mode="2" auto :showSeconds="true" :endDate="Info.StopTime" /></view></view>
			</view>
			<view class="name">{{Info.Name}}</view>
			<view class="line" @click="OpenAddress"><view class="icon"><image src="/static/address.png" /></view><view class="value">{{Info.Address}}</view><view class="daohang"><image src="https://yuehuiba.qiyedaishu.com/img/daohang.png" /></view></view>
			<view class="line"><view class="icon"><image src="/static/time.png" /></view><view class="value">活动举办时间：{{Info.ActiveDate.ToDate()}}（{{Info.ActiveDate.ToWeek()}}）{{Info.BeginTime}}-{{Info.EndTime}}</view></view>
			<view class="line border-b"><view class="icon"><image src="/static/shalou.png" /></view><view class="value">报名截止时间：{{Info.StopTime.ToDate()}}（{{Info.StopTime.ToWeek()}}）{{Info.StopTime.ToMinute()}}</view></view>
			<view class="bottom"><view class="author">{{Info.Author}}</view><view class="author" v-if="Info.ShowEnrollment==1">已报名<text class="red">{{Info.UserReplyCount}}</text>人</view></view>
			<!-- <view class="bottom" v-if="Role==1"><view class="author">{{Info.Author}}</view><view class="author">已报名<text class="red">{{Info.MatcherReplyCount}}</text>人</view></view> -->
		</view>
		<template v-if="ShowUser">
		<view class="list" v-if="Role==0 || IsAdmin==1">
			<view class="top">
				<view class="left">{{IsAdmin==0?"":"用户"}}已报名{{Info.ActiveReplyList1.length}}人</view>
				<view class="right">
					<view class="sex"><image src="/static/boy.png"/></view><view class="person right30">{{BoyCount1}}人</view>
					<view class="sex"><image src="/static/girl.png"/></view><view class="person">{{GirlCount1}}人</view>
				</view>
			</view>
			<view class="none" v-if="Info.ActiveReplyList1.length==0">赶快抢占第一个位置吧</view>
			<view class="user">
				<view class="headimg" v-for="item in Info.ActiveReplyList1" @click="UserInfo(item.UserID)">
					<image :src="Tools.GetImg(item.HeadImg,200)" mode="aspectFill"/>
					<view class="meng"></view><view class="sex"><image :src="'../../static/'+item.Sex.ToSex()"/></view>
				</view>
			</view>			
		</view>
		<view class="list" v-if="Role==1 || IsAdmin==1">
			<view class="top">
				<view class="left">{{IsAdmin==0?"":"红娘"}}已报名{{Info.ActiveReplyList2.length}}人</view>
				<view class="right">
					<view class="sex"><image src="/static/boy.png"/></view><view class="person right30">{{BoyCount2}}人</view>
					<view class="sex"><image src="/static/girl.png"/></view><view class="person">{{GirlCount2}}人</view>
				</view>
			</view>
			<view class="none" v-if="Info.ActiveReplyList2.length==0">赶快抢占第一个位置吧</view>
			<view class="user">
				<view class="headimg" v-for="item in Info.ActiveReplyList2" @click="UserInfo(item.UserID)">
					<image :src="Tools.GetImg(item.HeadImg,200)" mode="aspectFill"/>
					<view class="meng"></view><view class="sex"><image :src="'../../static/'+item.Sex.ToSex()"/></view>
				</view>
			</view>			
		</view>
		</template>
		<view class="list">
			<view class="title">报名条件</view>
			<view class="none" v-if="Info.Condition==''">暂无报名条件限制</view>
			<view class="context" v-html="Info.Condition"></view>			
		</view>
		<view class="list">
			<view class="title">活动内容</view>
			<view class="context"><mp-html :content="Info.Context" /></view>
		</view>
		<template v-if="Info.State==0">
			<template v-if="Info.IsStop==0">			
				<button class="publish" @click="ActiveReplySave()" v-if="ActiveReply.ID==0">我要报名</button>
				<button class="disabled" @click="HadReply()" v-if="ActiveReply.ID>0 && ActiveReply.State==0">你已报名，请耐心等待审核</button>
				<button class="disabled" @click="HadReply()" v-if="ActiveReply.ID>0 && ActiveReply.State==1">你的报名已通过审核</button>
				<button class="disabled" @click="HadReply()" v-if="ActiveReply.ID>0 && ActiveReply.State==2">你的报名未通过{{ActiveReply.Reason==""?"":"，查看原因"}}</button>
			</template>
			<template v-else>
				<button class="disabled" @click="HadEnd()">活动已截止报名</button>
			</template>
		</template>
		<template v-if="Info.State>0">
			<button class="disabled" @click="HadOver('活动'+Info.StateText)">{{'活动'+Info.StateText}}</button>
		</template>
	</view>
</template>

<script>
	export default {
		onShareAppMessage: function() {
			var UserID = uni.getStorageSync("UserID");
		    return {
		      title: this.Info.Name,
		      path: "pages/active/activeinfo?ParentID="+UserID+"&ID="+this.ID//这是一个路径
		    }
		},
		data() {
			return {
				ID:0,
				Lat:0,
				Lng:0,
				Role:0,
				IsAdmin:0,
				BoyCount1:0,
				GirlCount1:0,
				BoyCount2:0,
				GirlCount2:0,
				Info:{ID:0},
				ActiveReply:{ID:-1},
				ShowUser:false,
				UserState:0,
				ImgList:[]
			};
		},
		onShow() {
			uni.$once("RegistSuccess",item=>{
				this.Find_ActiveInfo();
			});
		},
		onLoad(options) {
			this.Util.SetParam(options);
			this.ID=options.ID;
			if(options.scene){
				this.ID = parseInt(decodeURIComponent(options.scene).split('_')[1]);
			}
			this.Role = uni.getStorageSync("Role");
			this.IsAdmin = uni.getStorageSync("IsAdmin");
			uni.getLocation({
			  type: 'wgs84', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
			  success: res=> {
			    this.Lat = res.latitude; // 纬度，浮点数，范围为90 ~ -90
			    this.Lng = res.longitude; // 经度，浮点数，范围为180 ~ -180。	
				this.Find_ActiveInfo();
			  },
			  fail: res=>{
				  this.Find_ActiveInfo();
			  }
			});
		},
		methods:{
			UserInfo(ID){
				uni.navigateTo({
					url:"/pages/yuehui/yuehuiinfo?ID="+ID 
				})
			},
			HadReply(){
				if(this.ActiveReply.State==0){
					this.Util.Alert("你已报名，请耐心等待审核");
				}
				if(this.ActiveReply.State==1){
					this.Util.Alert("你的报名已通过审核");
				}
				if(this.ActiveReply.State==2){
					this.Util.Alert("你的报名未通过"+(this.ActiveReply.Reason==""?"":"，原因："+this.ActiveReply.Reason));
				}
			},
			HadEnd(){
				this.Util.Alert("活动已截止报名");
			},
			HadOver(txt){
				this.Util.Alert(txt);
			},
			Delete(){
				this.Util.Confirm("您确定要删除吗？",item=>{
					var data = {};
					data.Act="Delete_Active";
					data.ID=this.ID;
					this.Util.Loading("请稍候...");
					this.Util.Post(data, json=>{
						this.Util.HideLoading();
						if(json.State){
							uni.$emit("ActiveDelete");
							this.Util.Toast(json.Msg, item=>{
								uni.navigateBack();
							});
						}else{
							this.Util.Alert(json.Msg);
						}
					});
				});
			},
			OpenAddress(){
				uni.openLocation({
					name:this.Info.Name,
					address:this.Info.Address,
					latitude: this.Info.Lat,
					longitude: this.Info.Lng,
					success: function () {
						
					}
				});
			},
			Find_ActiveInfo(){
				var data = {};
				data.Act="Find_ActiveInfo";
				data.ID=this.ID;
				data.Lat = this.Lat;
				data.Lng = this.Lng;
				this.Util.Loading("加载中...");
				this.Util.Post(data, json=>{
					this.Util.HideLoading();
					uni.stopPullDownRefresh();
					uni.hideNavigationBarLoading();
					this.Info = json.Data.Info;
					this.BoyCount1=json.Data.BoyCount1;
					this.GirlCount1=json.Data.GirlCount1;
					this.BoyCount2=json.Data.BoyCount2;
					this.GirlCount2=json.Data.GirlCount2;
					this.ActiveReply=json.Data.ActiveReply;
					this.ShowUser=json.Data.ShowUser;
					this.UserState=json.Data.UserState;
					this.ImgList= [json.Data.Info.Img].concat(json.Data.Info.Context.ToList());
				});
			},
			ActiveReplySave(){
				if(this.UserState==0){
					this.Util.Confirm("请完成注册后再报名活动，确定去完善资料吗？", item=>{
						uni.navigateTo({
							url:'/pages/login/regist'
						})
					});
					return;
				}
				this.Util.Confirm("您确定要报名吗？",item=>{
					var data = {};
					data.Act="Save_ActiveReply";
					data.ActiveID=this.ID;
					this.Util.Loading("请稍候...");
					this.Util.Post(data, json=>{
						this.Util.HideLoading();
						if(json.State){
							this.ActiveReply = json.Data.Info;
							this.Util.Toast(json.Msg);
						}else{
							this.Util.Alert(json.Msg);
						}
					});
				});
			}
		}
	}
</script>

<style lang="scss">
	.container{width:100%; padding:20rpx; padding-bottom: 150rpx;
		.list{width:100%; height:auto; padding:15rpx; border-radius: 20rpx; margin-bottom: 20rpx; background-color: #ffffff; display: flex; flex-direction: column;
			.img{width:100%; height: 400rpx; float:left; font-size:28rpx; position: relative; image{width:100%; height:100%; border-radius: 20rpx;}
				.state{width:auto; height: 46rpx; line-height: 46rpx; padding-left:45rpx; padding-right: 12rpx; border-radius: 25rpx; background-color: #17b202; color:#ffffff; background-image: url(/static/time2.png); background-size: 30rpx; background-repeat: no-repeat; background-position: 10rpx center; position:absolute; top:20rpx; left:20rpx;}
				.distance{width:auto; height: 46rpx; line-height: 46rpx; padding-left:45rpx; padding-right: 12rpx; border-radius: 25rpx; background-color: #0e90fe; color:#ffffff; background-image: url(/static/distance.png); background-size: 30rpx; background-repeat: no-repeat; background-position: 10rpx center; position:absolute; top:20rpx; right:20rpx;}
				.endtime{width:auto; height:40rpx; line-height: 40rpx;
					.meng{position: absolute; width:320rpx; height:50rpx; line-height: 50rpx; border-radius: 25rpx; right:20rpx; bottom:20rpx; background-color: #000000; opacity: 0.7;}
					.time{position: absolute; width:320rpx; height:50rpx; line-height: 50rpx; text-align: center; right:20rpx; bottom:20rpx; color:#ffffff; font-size:32rpx;}
				}
			}
			.name{width:100%; min-height: 44rpx; line-height: 44rpx; margin-top:10rpx; margin-bottom: 10rpx; float:left; font-size:36rpx; font-weight: bold;}
			.line{width:100%; min-height: 60rpx; padding-top:10rpx; float:left; display: flex; flex-direction: row; border-radius: 10rpx;
				.icon{width:30rpx; height:30rpx; margin-top:5rpx; image{width:30rpx; height:30rpx;}}
				.value{width:auto; min-height:40rpx; line-height: 40rpx; padding-left:8rpx; font-size:30rpx;}
				.daohang{width:60rpx; height:60rpx; image{width:60rpx; height:60rpx;}}
			}
			.line:active{background-color:#f6f6f6;}
			.bottom{width:100%; height: 70rpx; line-height: 80rpx; font-size:28rpx; float:left; display: flex; flex-direction: row; justify-content: space-between;}
			
			.title{width:100%; height:60rpx; padding-top:20rpx; padding-left:20rpx; font-size:32rpx; font-weight: bold;}
			.context{width:100%; height:auto; line-height: 36rpx; padding:20rpx; font-size:30rpx;}
			.top{width:100%; height:80rpx; display: flex; flex-direction: row;
				.left{flex:1; padding-top:10rpx; padding-left:15rpx; font-size:30rpx;}
				.right{width:auto; display: flex; flex-direction: row; padding-top:10rpx; padding-right:10rpx;
					.sex{width:40rpx; height: 40rpx; padding-top:5rpx; image{width:30rpx; height: 30rpx;}}
					.person{width:auto; height:40rpx; line-height: 40rpx; font-size:30rpx;}
				}
			}
			.user{width:100%; height:auto; padding-left:10rpx; display: flex; flex-direction: row; justify-content: flex-start; flex-wrap: wrap;
				.headimg{width:96rpx; height:96rpx; position: relative; margin-right: 20rpx; margin-bottom: 20rpx; image{width:100%; height:100%; border-radius: 49rpx;}
					.meng{width:30rpx; height:30rpx; position: absolute; bottom: 14rpx; right: 14rpx; border-radius: 15rpx; background-color: #ffffff; opacity: 0.8;}
					.sex{width:20rpx; height: 20rpx; position: absolute; bottom: 24rpx; right: 19rpx; image{width:20rpx; height:20rpx; border-radius: 0rpx;}}
				}
				.headimg:nth-child(6n){margin-right: 0rpx;}
			}
			.none{width:100%; height: 100rpx; line-height:100rpx; color:#b1b1b1; font-size: 30rpx; text-align: center;}
		}
	}
</style>
